<template>
  <section class="leftOneContainer">
    <div class="leftOneBox flex align-center justify-around">
      <div>
        <h3 class="color01">3</h3>
        <p>模型发布数量</p>
      </div>
      <div>
        <h3 class="color02">8978</h3>
        <p>模型调用总数</p>
      </div>
      <div>
        <h3 class="color03">98</h3>
        <p>模型申请总数</p>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  name: '',
  props: {},
  components: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {},
}
</script>
<style lang="scss" scoped>
.leftOneContainer {
  padding: 10px;
  width: 100%;
  box-sizing: border-box;

  .leftOneBox {
    > div {
      text-align: center;

      h3 {
        font-size: 42px;
        margin: 0;
        font-family: "numberFont";
        font-weight: bold;
        line-height: 50px;

        &.color01 {
          color: #3fe194;
        }

        &.color02 {
          color: #f49c37;
        }

        &.color03 {
          color: #fb452c;
        }
      }

      p {
        font-size: 18px;
        color: #333;
        margin: 0;
        line-height: 26px;
        font-weight: bold;
      }
    }
  }
}
</style>
